<template>
  <div v-if="showPanel">
    <NodeHead class="mb-3" :nodeName="nodeName" />
    <a-tabs>
      <a-tab-pane key="1" :tab="t('基础配置')">
        <FormItem required :label="t('节点名称：')">
          <a-input
            v-model:value="formInfo.name"
            :placeholder="t('请填写节点名称')"
            @change="updateElementName"
          />
        </FormItem>
        <slot name="basic"></slot>
        <FormItem :label="t('节点备注：')">
          <a-textarea v-model:value="formInfo.remark" :rows="8" />
        </FormItem>
        <slot name="noticePolicy"></slot>
      </a-tab-pane>
      <slot></slot>

      <a-tab-pane key="99" :tab="t('事件监听')">
        <a-tabs>
          <a-tab-pane key="1" :tab="t('开始事件')">
            <div class="process-top">
              <a-button type="primary" @click="addStartEvent">
                {{ t('添加开始事件') }}
              </a-button>
            </div>
            <a-table
              :columns="columns"
              :data-source="formInfo.startEventConfigs"
              :pagination="false"
            >
              <template #headerCell="{ column }">
                <template v-if="column.key === 'sort'">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fangxiang1" />
                  </svg>
                </template>
              </template>
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'sort'">
                  <svg class="icon draggable-icon" aria-hidden="true" style="cursor: move">
                    <use xlink:href="#icon-paixu" />
                  </svg>
                </template>
                <template v-if="column.key === 'type'">
                  <a-select v-model:value="record[column.dataIndex]">
                    <a-select-option :value="0">{{ t('执行API') }}</a-select-option>
                    <a-select-option :value="1">{{ t('规则引擎') }}</a-select-option>
                  </a-select>
                </template>
                <template v-if="column.key === 'operateConfig'">
                  <!-- <a-input
                    v-if="record.type === NodeEventExType.API"
                    v-model:value="record['apiConfig'].path"
                    @click="showConfig(NodeEventType.START, index)"
                  >
                    <template #suffix>
                      <Icon icon="ant-design:ellipsis-outlined" />
                    </template>
                  </a-input> -->
                  <ScriptApiSelect
                    v-if="record.type === NodeEventExType.API"
                    style="width: 100%"
                    v-model="record['apiConfig']"
                    :need-hide-components="true"
                  />
                  <a-select
                    style="width: 100%"
                    v-else-if="record.type === NodeEventExType.LITEFLOW"
                    v-model:value="record['liteflowId']"
                    :options="liteFlowOptions"
                    :field-names="{ label: 'chainName', value: 'id' }"
                  />
                </template>
                <template v-if="column.key === 'action'">
                  <DeleteTwoTone two-tone-color="#ff8080" @click="deleteStartEvent(index)" />
                </template>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="t('结束事件')">
            <div class="process-top">
              <a-button type="primary" @click="addEndEvent"> {{ t('添加结束事件') }} </a-button>
            </div>
            <a-table :columns="columns" :data-source="formInfo.endEventConfigs" :pagination="false">
              <template #headerCell="{ column }">
                <template v-if="column.key === 'sort'">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fangxiang1" />
                  </svg>
                </template>
              </template>
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'sort'">
                  <svg class="icon draggable-icon" aria-hidden="true" style="cursor: move">
                    <use xlink:href="#icon-paixu" />
                  </svg>
                </template>
                <template v-if="column.key === 'type'">
                  <a-select v-model:value="record[column.dataIndex]">
                    <a-select-option :value="0">{{ t('执行API') }}</a-select-option>
                    <a-select-option :value="1">{{ t('规则引擎') }}</a-select-option>
                  </a-select>
                </template>
                <template v-if="column.key === 'operateConfig'">
                  <ScriptApiSelect
                    v-if="record.type === NodeEventExType.API"
                    style="width: 100%"
                    v-model="record['apiConfig']"
                    :need-hide-components="true"
                  />
                  <!-- <a-input
                    v-if="record.type === NodeEventExType.API"
                    v-model:value="record['apiConfig'].path"
                    @click="showConfig(NodeEventType.END, index)"
                  >
                    <template #suffix>
                      <Icon icon="ant-design:ellipsis-outlined" />
                    </template>
                  </a-input> -->
                  <a-select
                    style="width: 100%"
                    v-else-if="record.type === NodeEventExType.LITEFLOW"
                    v-model:value="record['liteflowId']"
                    :options="liteFlowOptions"
                    :field-names="{ label: 'chainName', value: 'id' }"
                  />
                </template>
                <template v-if="column.key === 'action'">
                  <DeleteTwoTone two-tone-color="#ff8080" @click="deleteEndEvent(index)" />
                </template>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
    </a-tabs>

    <!-- <ApiConfig
      v-if="apiConfigDialog"
      :title="t('API配置')"
      v-model:apiConfigDialog="apiConfigDialog"
      v-model:apiConfig="
        formInfo[eventType === NodeEventType.START ? 'startEventConfigs' : 'endEventConfigs'][
          configIndex
        ].apiConfig
      "
    /> -->
  </div>
</template>

<script setup lang="ts">
  import useStateFormInfo from '/@bpmn/hooks/useStateFormInfo';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import FormItem from '/@bpmn/layout/FormItem.vue';
  import { inject, nextTick, onMounted, ref, watch } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { DeleteTwoTone } from '@ant-design/icons-vue';
  import { getLiteflowList } from '/@/api/liteflow';
  // import { ApiConfig } from '/@/components/ApiConfig';
  import ScriptApiSelect from '/@bpmn/components/arguments/ScriptApiSelect.vue';
  import Sortable from 'sortablejs';
  import { NodeEventExType } from '/@/enums/workflowEnum';
  import { NodeEventConfig } from '/@/model/workflow/workflowConfig';
  const { t } = useI18n();
  const { showPanel, formInfo, nodeName } = useStateFormInfo();
  const updateElementName = inject('updateElementName') as any;

  const liteFlowOptions = ref();

  const columns = ref([
    {
      dataIndex: 'sort',
      key: 'sort',
    },
    {
      title: t('操作类别'),
      dataIndex: 'type',
      key: 'type',
      width: '35%',
      align: 'center',
    },
    {
      title: t('操作配置'),
      dataIndex: 'operateConfig',
      key: 'operateConfig',
      width: '50%',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'action',
      key: 'action',
      width: '25%',
      align: 'center',
    },
  ]);
  onMounted(() => {
    getList();
  });
  const addStartEvent = () => {
    formInfo.value.startEventConfigs.push({
      type: NodeEventExType.API,
      apiConfig: {},
    } as NodeEventConfig);
  };

  const addEndEvent = () => {
    formInfo.value.endEventConfigs.push({
      type: NodeEventExType.API,
      apiConfig: {},
    } as NodeEventConfig);
  };

  watch(
    () => formInfo.value,
    () => {
      if (
        formInfo.value.endEventConfigs?.length > 0 ||
        formInfo.value.startEventConfigs?.length > 0
      ) {
        nextTick(() => {
          const tbody: any = document.querySelector('.ant-table-tbody');
          Sortable.create(tbody, {
            handle: '.draggable-icon',
          });
        });
      }
    },
    { deep: true },
  );

  const deleteStartEvent = (index) => {
    formInfo.value.startEventConfigs.splice(index, 1);
  };

  const deleteEndEvent = (index) => {
    formInfo.value.endEventConfigs.splice(index, 1);
  };

  const getList = async () => {
    liteFlowOptions.value = (await getLiteflowList()) || [];
  };
</script>

<style lang="less" scoped>
  .node-box {
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: -7px -1px 7px #dadcde;
    padding: 20px 30px 20px 20px;
    height: 100%;
    width: 410px;

    .node-title {
      line-height: 20px;
      margin-bottom: 10px;
      padding-left: 6px;
      border-left: 6px solid #5e95ff;
    }

    :deep(.ant-form-item) {
      margin-bottom: 10px;
    }

    .process-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .process-title {
        line-height: 18px;
        padding-left: 6px;
        border-left: 6px solid #5e95ff;
      }
    }

    :deep(.ant-select) {
      width: 100%;
    }
  }

  :deep(.ant-table-cell) {
    padding: 10px !important;
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentcolor;
    overflow: hidden;
  }
</style>
